<template>
<el-container>
  <el-header style="height: 100%;border: 1px">
    <el-menu class="el-menu-demo" mode="horizontal" :router="true">
      <el-col :span="6" style="margin: 0px 43% 0px 10px ">
        <h2 style="font-size: 35px">:D豆嗲</h2>
      </el-col>
      <el-menu-item index="/storeadmin.html" style="padding: 40px 5px 62px 5px">首页</el-menu-item>
      <el-menu-item  style="padding: 40px 5px">/</el-menu-item>
      <el-menu-item index="/storeShowOrders.html" style="padding: 40px 5px 62px 5px">我的订单</el-menu-item>
      <el-menu-item  style="padding: 40px 5px">/</el-menu-item>
      <el-menu-item index="/modifyPassword.html" style="padding: 40px 5px 62px 5px">修改密码</el-menu-item>
      <el-menu-item  style="padding: 40px 5px">/</el-menu-item>
      <el-menu-item  style="padding: 40px 5px 62px 5px" @click="logout">注销</el-menu-item>
    </el-menu>
  </el-header>

  <span style="margin: 15px 150px 0px 150px;text-align: center;font-size: large">以下是您家的所有宝贝哦~共有{{ this.pager.count }}件宝贝！</span>

  <el-row style="margin: 20px 0px 0px 170px;">
    <el-card style="position: relative;left: -5%">
      <el-button type="primary" @click="toAdd">上架商品</el-button>
<!--        <el-button class="button" @click="delBatch" type="danger">批量下架</el-button>-->
      <el-table  :data="goods"  style="width: 100%" :header-cell-style="{'text-align':'center'}"
                :cell-style="{'text-align':'center'}" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column prop="imghref" label="商品图片" >
          <template slot-scope="scope">
            <img  :src="scope.row.imghref" alt="" style="width: 100px;height: 100px" >
          </template>
        </el-table-column>
        <el-table-column prop="goodname" label="商品名称" width="300px">
        </el-table-column>
        <el-table-column prop="price" label="单价(元)" >
        </el-table-column>
        <el-table-column prop="size" label="尺寸" width="100px">
        </el-table-column>
        <el-table-column prop="num" label="商品库存" width="200px">
        </el-table-column>
        <el-table-column prop="role" label="商品状态" >
          <template slot-scope="scope">{{
              scope.row.role == 0 ? '商品销售中' : '已下架！'
            }}</template>
        </el-table-column>
        <el-table-column label="操作" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-button  @click="handleEdit(scope.row)" round>修改</el-button>
            <el-button @click="undercarriage(scope.row)" type="danger" round>下架</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </el-row>

  <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="pager.pageNum"
      :page-sizes="pager.options"
      :page-size="pager.pageSize"
      layout="total, sizes, prev, pager,next,jumper "
      :total="pager.count" style="padding-top: 50px">
  </el-pagination>
  <br><br>

  <el-footer  style="padding:0px 0px 350px 0px">
    <el-row>
      <img width="35px" height="35px" style="margin: 50px 0px 0px -60%" src="../img/many.png">
      <h1 style="color: white;margin: -70px 42% 0px 0px ">品类齐全，轻松购物</h1>
      <el-col :span="2" style="margin: -50px 0px 0px 37% ">
        <img width="35px" height="35px" src="../img/fast.png">
      </el-col>
      <h1 style="color: white;margin: -60px 0% 0px 0px">多仓直发，极速配送</h1>
      <el-col :span="2" style="margin: -53px 0px 0px 200px ">
        <img width="33px" height="33px" src="../img/good.png">
      </el-col>
      <h1 style="color: white;margin: -60px 0px 0px 40%">正品好货，精致服务</h1>
    </el-row>
    <el-divider></el-divider>
    <img width="50px" height="50px" src="../img/touxiang.png">
    <el-breadcrumb>
      <el-breadcrumb-item style="font-size: 18px;margin-left: 30px">关于我们</el-breadcrumb-item>
      <el-breadcrumb-item style="font-size: 18px">联系我们</el-breadcrumb-item>
      <el-breadcrumb-item style="font-size: 18px">人才招聘</el-breadcrumb-item>
      <el-breadcrumb-item style="font-size: 18px">商家入驻</el-breadcrumb-item>
      <el-breadcrumb-item style="font-size: 18px">广告服务</el-breadcrumb-item>
      <el-breadcrumb-item style="font-size: 18px">手机京东</el-breadcrumb-item>
      <el-breadcrumb-item style="font-size: 18px">友情链接</el-breadcrumb-item>
      <el-breadcrumb-item style="font-size: 18px">销售联盟</el-breadcrumb-item>
    </el-breadcrumb>
    <h1 style="color: #8a8a8a;font-size: 15px;margin: 0px 20px 0px 0px">Copyright &copy; 2021 豆嗲:D.com版权所有</h1>
  </el-footer>

</el-container>
</template>

<script>
import loginApi from "@/http/loginApi";
import goodsBystoreApi from "@/http/goodsBystoreApi";

export default {
name: "StoreAdmin",
  data(){
   return{
     searchForm: {},
     goods:"",
     pager: {
       pagerNum: 1,
       pageSize: 10
     },
     batchIds: [],
   }
  },
  created() {
    //当vue实例创建成功时
    this.getList();
    this.$store.dispatch("GET_USERINFO_ACTIONS");
  },
  methods:{
    toAdd(){
      this.$router.push("/store/toAdd.html")
    },
    logout(){
      loginApi.logout().then(res => {
        if (res.data.code == 200) {
          this.$message.info(res.data.msg);
          sessionStorage.clear();
          this.$router.replace("/login.html");
        }
      })
  },
    getList(){
      goodsBystoreApi.getListByPage(this.searchForm, {
        pageNum: this.pager.pageNum,
        pageSize: this.pager.pageSize
      }).then(res =>{
        console.log(res);
        if (res.data.code == 200){
          this.pager = res.data.data
          this.goods = this.pager.data
        }
      })
    },
    handleSizeChange(val){
      this.pager.pageSize = val
      this.getList();
    },
    handleCurrentChange(val){
      this.pager.pageNum = val
      this.getList();
    },
    handleSelectionChange(val) {
      console.log(val);
      this.batchIds = [];
      val.forEach(item => this.batchIds.push(item.id));
      console.log(this.batchIds);
    },
    undercarriage(row){
      console.log("this.row",row.id);
      let result = confirm("确定下架该商品吗？");
      if (result){
        goodsBystoreApi.del(row.id).then(res => {
          if (res.data.code == 200){
            this.$message.success(res.data.msg);
            this.getList();
          }
        })
      }
    },
    handleEdit(row) {
      this.$router.push(`/store/toEdit/${row.id}.html`)
    },
    delBatch(){
      if (this.batchIds.length == 0){
        this.$message.warning("请勾选要下架的商品！")
        return;
      }
      let result = confirm("确认下架这些商品吗");
      if (result){
        goodsBystoreApi.delBatch(this.batchIds).then(res => {
          console.log("code",res);
          if (res.data.code == 200){
            this.$message.success(res.data.msg);
            this.getList();
          }
        })
      }
    },
  }
}
</script>

<style scoped>

</style>